<template>
  <!-- if容错 -->
  <div id="HeartChooseMall" v-if="activitiesList">
    <div class="fixedheader">
      <van-nav-bar
        title="心选商城"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        class="navbar"
      />
      <img src="@/assets/images/XXSC/xxsc-2@2x.png" alt="" class="navimg" />
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="搜索商品"
          @search="onSearch"
          @cancel="onCancel"
          shape="round"
        />
      </form>
    </div>
    <!-- 美好生活 不止阅读 -->
    <p class="textp">
      <span class="mhsh">美好生活 不止阅读</span>&nbsp;
      <span class="hyqy">会员权益·积分抵扣·VIP再享9.6折优惠</span>
    </p>
    <!-- 主体部分 -->
    <div class="mian-wrap">
      <!-- 六个链接 -->
      <ul class="firstul">
        <li v-for="item in list" :key="item" class="sixli">
          <div class="yuandiv" :style="{ backgroundColor: item.color }">
            {{ item.text }}
          </div>
          <span class="spantext">{{ item.text }}</span>
        </li>
        <img
          src="@/assets/images/XXSC/xssc-5@2x.png"
          alt=""
          class="flxedimg1"
        />
      </ul>
      <!-- 樊登讲书专栏 -->
      <p class="firstp">
        <span class="pdjszl">樊登讲书专栏</span>
        <span class="yzyb">| 一周一本 成长看得见</span>
        <span class="morespan">
          更多
          <img src="@/assets/images/XXSC/xssc-6@2x.png" alt="" />
        </span>
      </p>
      <!-- 解读 -->
      <div class="pdtalk">
        <ul class="books">
          <li>
            <img src="@/assets/images/XXSC/xssc-7@2x.png" alt="" />
            <p>6月26日解读</p>
          </li>
          <li>
            <img src="@/assets/images/XXSC/xssc-8@2x.png" alt="" />
            <p>7月03日解读</p>
          </li>
          <li>
            <img src="@/assets/images/XXSC/xssc-9@2x.png" alt="" />
            <p>即将解读</p>
          </li>
        </ul>
        <!-- 一键订阅 -->
        <div class="pdfuture">
          <div class="futureleft">
            <p class="phh">攀登•未来书单-----帮你养成阅读好习惯</p>
            <p class="ptext">1周1本本与樊登同步阅读 共同进步</p>
            <p class="oneding">一键订阅</p>
          </div>
          <div class="futureright">
            <img src="@/assets/images/XXSC/xssc-10@2x.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 解忧杂货铺 -->
      <p class="secondp">
        <span class="pdjszl">解忧杂货铺 </span>
        <span class="yzyb"> | 你想要的答案 其实从来不难</span>
      </p>
      <ul class="jyzhp">
        <img
          src="@/assets/images/XXSC/xssc-5@2x.png"
          alt=""
          class="flxedimg2"
        />
        <img
          src="@/assets/images/XXSC/xssc-13@2x.png"
          alt=""
          class="flxedimg3"
        />
        <li v-for="item in activitiesList.result[0].list" :key="item">
          <img :src="item.img" alt="" />
          <div class="jyzhpright">
            <p class="righth">{{ item.title }}</p>
            <p class="righttext">{{ item.text }}</p>
            <p class="rightgoods">
              内含{{ item.goods }}见商品·
              <span class="goodspan">{{ item.people }}</span>
              人看过
            </p>
          </div>
        </li>
      </ul>
      <!-- 心选社 -->
      <p class="thirdp">
        <span class="pdjszl">心选社</span>
        <span class="yzyb">| 用心甄选 有趣好用</span>
        <span class="morespan">
          更多
          <img src="@/assets/images/XXSC/xssc-6@2x.png" alt="" />
        </span>
      </p>
      <img src="@/assets/images/XXSC/xssc-14@2x.png" alt="" class="xxsimg" />
      <!-- 优选童书 -->
      <p class="thirdp">
        <span class="pdjszl">优选童书</span>
        <span class="yzyb">| 让孩子爱上阅读 塑造好性格</span>
        <span class="morespan">
          更多
          <img src="@/assets/images/XXSC/xssc-6@2x.png" alt="" />
        </span>
      </p>
      <ul class="yxts">
        <li
          v-for="item in activitiesList.result[1].list"
          :key="item"
          class="yxtsli"
        >
          <img :src="item.img" alt="" />
          <p class="title">
            <span class="white" v-if="item.titlehead === '拼团'">{{
              item.titlehead
            }}</span>
            <span class="red" v-if="item.titlehead === '新品'">{{
              item.titlehead
            }}</span>
            {{ item.title }}
          </p>
          <p class="text">{{ item.text }}</p>
          <p class="money">￥{{ item.money }}</p>
          <img src="@/assets/images/XXSC/xssc-17@2x.png" alt="" class="cart" />
        </li>
      </ul>
      <!-- 当季好物 -->
      <p class="fourthp">
        <span class="pdjszl">当季好物</span>
        <span class="yzyb">| 好物正当季 优惠等你来</span>
        <span class="morespan">
          更多
          <img src="@/assets/images/XXSC/xssc-6@2x.png" alt="" />
        </span>
      </p>

      <ul class="xrdiv">
        <li
          v-for="item in activitiesList.result[2].list"
          :key="item"
          class="yxtsli"
        >
          <img :src="item.img" alt="" />
          <p class="title">{{ item.title }}</p>
          <p class="text">{{ item.text }}</p>
          <p class="money">￥{{ item.money }}</p>
          <img src="@/assets/images/XXSC/xssc-17@2x.png" alt="" class="cart" />
        </li>
      </ul>
      <!-- 读经典频道 -->
      <p class="fourthp">
        <span class="pdjszl">读经典频道</span>
        <span class="yzyb">| 孩子看学好语文 大人看滋养心灵</span>
        <span class="morespan">
          更多
          <img src="@/assets/images/XXSC/xssc-6@2x.png" alt="" />
        </span>
      </p>

      <ul class="xrdiv">
        <li
          v-for="item in activitiesList.result[3].list"
          :key="item"
          class="yxtsli"
        >
          <img :src="item.img" alt="" />
          <p class="title">{{ item.title }}</p>
          <p class="text">{{ item.text }}</p>
          <p class="money">￥{{ item.money }}</p>
          <img src="@/assets/images/XXSC/xssc-17@2x.png" alt="" class="cart" />
        </li>
      </ul>
      <!-- 亲子乐园 -->
      <p class="fourthp">
        <span class="pdjszl">亲子乐园</span>
        <span class="yzyb">| 亲子育儿好书好物</span>
        <span class="morespan">
          更多
          <img src="@/assets/images/XXSC/xssc-6@2x.png" alt="" />
        </span>
      </p>

      <ul class="xrdiv">
        <li
          v-for="item in activitiesList.result[4].list"
          :key="item"
          class="yxtsli"
        >
          <img :src="item.img" alt="" />
          <p class="title">{{ item.title }}</p>
          <p class="text">{{ item.text }}</p>
          <p class="money">￥{{ item.money }}</p>
          <img src="@/assets/images/XXSC/xssc-17@2x.png" alt="" class="cart" />
        </li>
      </ul>
      <!-- 励志心灵馆 -->
      <p class="fourthp">
        <span class="pdjszl">励志心灵馆</span>
        <span class="yzyb">| 在浮躁的时代给你疗愈</span>
        <span class="morespan">
          更多
          <img src="@/assets/images/XXSC/xssc-6@2x.png" alt="" />
        </span>
      </p>

      <ul class="xrdiv">
        <li
          v-for="item in activitiesList.result[5].list"
          :key="item"
          class="yxtsli"
        >
          <img :src="item.img" alt="" />
          <p class="title">{{ item.title }}</p>
          <p class="text">{{ item.text }}</p>
          <p class="money">￥{{ item.money }}</p>
          <img src="@/assets/images/XXSC/xssc-17@2x.png" alt="" class="cart" />
        </li>
      </ul>
      <!-- 职场技能馆 -->
      <p class="fourthp">
        <span class="pdjszl">职场技能馆</span>
        <span class="yzyb">| 提升自我价值 助力升职加薪</span>
        <span class="morespan">
          更多
          <img src="@/assets/images/XXSC/xssc-6@2x.png" alt="" />
        </span>
      </p>

      <ul class="xrdiv">
        <li
          v-for="item in activitiesList.result[6].list"
          :key="item"
          class="yxtsli"
        >
          <img :src="item.img" alt="" />
          <p class="title">{{ item.title }}</p>
          <p class="text">{{ item.text }}</p>
          <p class="money">￥{{ item.money }}</p>
          <img src="@/assets/images/XXSC/xssc-17@2x.png" alt="" class="cart" />
        </li>
      </ul>
      <!-- 解读书籍榜 -->
      <p class="fourthp">
        <span class="pdjszl">解读书籍榜</span>
        <span class="yzyb">| 书友都在看的解读好书</span>
        <span class="morespan">
          更多
          <img src="@/assets/images/XXSC/xssc-6@2x.png" alt="" />
        </span>
      </p>

      <ul class="xrdiv">
        <li
          v-for="item in activitiesList.result[7].list"
          :key="item"
          class="yxtsli"
        >
          <img :src="item.img" alt="" />
          <p class="title">{{ item.title }}</p>
          <p class="text">{{ item.text }}</p>
          <p class="money">￥{{ item.money }}</p>
          <img src="@/assets/images/XXSC/xssc-17@2x.png" alt="" class="cart" />
        </li>
      </ul>
    </div>
    <!-- 底部导航 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="qr">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-circle-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Toast } from "vant";
import { useStore } from "vuex";
import { onMounted, computed, ref } from "vue";
// import { useRouter } from "vue-router";
export default {
  setup() {
    // const router = useRouter();
    // const onClickLeft = () => {
    //   // Toast("返回");
    //   router.go(-1);
    // },
    const titlehead = ref("white");
    const store = useStore();
    const getactivities = () => store.dispatch("getniceshopping");
    const activitiesList = computed(
      () => store.state.getniceshopping.niceshoppingContent
    );
    onMounted(() => {
      getactivities();
      cc();
    });
    const cc = () => {
      // activitiesList.value?.result[1].list.forEach((element) => {
      //   if (element.titlehead === "新品") {
      //     titlehead.value = "red";
      //   } else if (element.titlehead === "拼团") {
      //     titlehead.value = "white";
      //   }
      // });
    };
    return {
      getactivities,
      activitiesList,
      titlehead,
      cc,
      // onClickLeft,
      // router,
    };
  },
  data() {
    return {
      value: "",
      //六个链接渲染列表
      list: [
        {
          text: "9.9特惠",
          color: "#875b67",
        },
        {
          text: "做好父母",
          color: "#6d829e",
        },
        {
          text: "学习进步",
          color: "#5e5786",
        },
        {
          text: "名人传记",
          color: "#8b815c",
        },
        {
          text: "吃喝研究",
          color: "#6d4c7c",
        },
        {
          text: "更多好书",
          color: "#608864",
        },
      ],
      active: 0,
    };
  },
  methods: {
    onClickLeft() {
      // this.$router.go(-1);
      this.$router.push("/home/main/recommend");
    },
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
  },
};
</script>

<style lang="less">
#HeartChooseMall {
  font-size: 16px;
  //头部
  font-size: 16px;
  .fixedheader {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    .van-icon-arrow-left:before {
      content: "\e668";
      color: #000;
    }
    .van-nav-bar__text {
      color: #000;
    }
    .van-nav-bar__title {
      font-weight: 900;
    }
    .navimg {
      width: 16px;
      height: 16px;
      margin: 15px 15px 0 0;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 9;
    }
    .van-field {
      border-radius: 13px;
    }
  }
  //美好生活，不止阅读
  .textp {
    margin-top: 100px;
    padding: 10px 4px;
    .mhsh {
      width: 145px;
      height: 17px;
      font-size: 17px;
      font-family: PingFangSC;
      font-weight: 600;
      color: #272727;
    }
    .hyqy {
      width: 195px;
      height: 11px;
      font-size: 11px;
      font-family: PingFangSC;
      font-weight: 600;
      color: #747474;
    }
  }
  //主体部分
  .mian-wrap {
    width: 100%;
    height: 5736px;
    background: #f7f7f7;
    //六个链接
    .firstul {
      overflow: hidden;
      .sixli {
        width: 110px;
        height: 50px;
        background: #fefefe;
        border: 1px solid #eeecee;
        border-radius: 5px;
        float: left;
        margin: 10px 7px;
        .yuandiv {
          width: 40px;
          height: 40px;
          text-align: center;
          margin: 5px 0 0 5px;
          border-radius: 50%;
          font-size: 12px;
          float: left;
          padding: 7px;
          color: white;
        }
        .spantext {
          float: right;
          font-size: 12px;
          line-height: 50px;
          margin-right: 5px;
        }
      }
      .flxedimg1 {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 145px;
        left: 345px;
      }
    }
    //樊登讲书专栏
    .firstp {
      // padding-top: 150px;
      // margin-left: 10px;
      margin: 20px 0 15px 10px;
      .pdjszl {
        width: 104px;
        height: 17px;
        font-size: 18px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #272727;
      }
      .yzyb {
        width: 110px;
        height: 12px;
        font-size: 12px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #747474;
      }
      .morespan {
        width: 43px;
        height: 12px;
        font-size: 12px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #747474;
        float: right;
        margin-right: 5px;
        img {
          display: inline-block;
          width: 7px;
          height: 10px;
          margin-top: 10px;
        }
      }
    }
    //解读
    .pdtalk {
      width: 353px;
      height: 348px;
      background: #ffffff;
      border-radius: 15px;
      margin: 10px auto;
      .books {
        width: 100%;
        height: 150px;
        padding-top: 20px;
        display: flex;
        justify-content: space-around;
        li {
          display: flex;
          flex-direction: column;
          float: left;
          img {
            width: 94px;
            height: 132px;
          }
          p {
            width: 100px;
            height: 12px;
            font-size: 12px;
            font-family: PingFangSC;
            font-weight: 600;
            color: #747474;
            text-align: center;
          }
        }
      }
      .pdfuture {
        width: 324px;
        height: 135px;
        background: #f0eede;
        border-radius: 15px;
        margin: 42px auto;
        .futureleft {
          float: left;
          margin-left: 10px;
          .phh {
            width: 200px;
            font-size: 16px;
            font-family: PingFangSC;
            font-weight: 600;
            color: #363637;
            margin-top: 30px;
          }
          .ptext {
            height: 12px;
            font-size: 12px;
            font-family: PingFangSC;
            font-weight: 600;
            color: #747474;
            margin-top: 10px;
          }
          .oneding {
            display: inline-block;
            background: #667b96;
            color: white;
            width: 64px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            font-size: 13px;
            border-radius: 3px;
            margin-top: 20px;
          }
        }
        .futureright {
          float: right;
          img {
            width: 94px;
            height: 107px;
            margin: 20px 16px 0 0;
          }
        }
      }
    }
    //解忧杂货铺
    .secondp {
      margin: 40px 0 15px 15px;
      .pdjszl {
        width: 104px;
        height: 17px;
        font-size: 18px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #272727;
      }
      .yzyb {
        width: 110px;
        height: 12px;
        font-size: 12px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #747474;
      }
      .morespan {
        width: 43px;
        height: 12px;
        font-size: 12px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #747474;
        float: right;
        img {
          display: inline-block;
          width: 7px;
          height: 10px;
          margin-top: 10px;
        }
      }
    }
    .jyzhp {
      width: 349px;
      height: 259px;
      background: #ffffff;
      border-radius: 15px;
      margin: 10px auto;
      .flxedimg2 {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 777px;
        left: 306px;
      }
      .flxedimg3 {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 888px;
        left: 275px;
      }
      li {
        padding: 18px 0 0 10px;
        img {
          width: 94px;
          height: 94px;
        }
        .jyzhpright {
          float: right;
          width: 240px;
          .righth {
            width: 188px;
            height: 18px;
            font-size: 17px;
            font-family: PingFangSC;
            font-weight: 600;
            color: #363637;
            margin: 10px 0;
          }
          .righttext {
            width: 220px;
            height: 12px;
            font-size: 12px;
            font-family: PingFangSC;
            font-weight: 600;
            color: #858585;
            margin: 18px 0;
          }
          .rightgoods {
            width: 155px;
            height: 11px;
            font-size: 12px;
            font-family: PingFangSC;
            font-weight: 600;
            color: #858585;
            .goodspan {
              color: orangered;
            }
          }
        }
      }
    }
    //心选社、优选童书
    .thirdp {
      margin: 15px 0 15px 10px;
      // margin-bottom: 10px;
      .pdjszl {
        width: 104px;
        height: 17px;
        font-size: 18px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #272727;
      }
      .yzyb {
        width: 110px;
        height: 12px;
        font-size: 12px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #747474;
      }
      .morespan {
        width: 43px;
        height: 12px;
        font-size: 12px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #747474;
        float: right;
        img {
          display: inline-block;
          width: 7px;
          height: 10px;
          margin-top: 10px;
        }
      }
    }
    .xxsimg {
      width: 98%;
      margin: 1%;
    }
    .yxts {
      width: 100%;
      overflow: hidden;
      // margin-bottom: 120px;
      .yxtsli {
        width: 180px;
        height: 260px;
        background: #fefefe;
        border-radius: 5px;
        float: left;
        margin: 0 0 5px 5px;
        img {
          width: 120px;
          height: 146px;
          margin: 10px 30px;
        }
        .title {
          width: 150px;
          // height: 12px;
          font-size: 12px;
          font-family: PingFangSC;
          font-weight: 400;
          color: #2f2f2f;
          margin-left: 10px;
          .white {
            border: 1px solid orangered;
            color: orangered;
            margin: 0;
            height: 16px;
            padding: 1px;
            border-radius: 3px;
            display: inline-block;
          }
          .red {
            display: inline-block;
            // border: 1px solid orangered;
            background-color: orangered;
            color: white;
            margin: 0;
            height: 16px;
            padding: 1px;
            border-radius: 3px;
          }
          // .titlehead {
          //   border: 1px solid orangered;
          // }
        }
        .text {
          width: 180px;
          // height: 10px;
          margin: 0 3px;
          line-height: 16px;
          font-size: 12px;
          font-family: PingFangSC;
          font-weight: 400;
          color: #a0a0a0;
        }
        .money {
          width: 64px;
          height: 16px;
          font-size: 16px;
          font-family: PingFangSC;
          font-weight: 400;
          color: #ec6d2a;
          float: left;
        }
        .cart {
          float: right;
          width: 17px;
          height: 17px;
          // border: 2px solid #EC6D2B;
          border-radius: 50%;
          margin: 0 10px 10px 0;
          // padding: 0;
        }
      }
    }
    //当季好物、读经典频道、亲子乐园、励志心灵馆、职场技能馆、解读书籍榜
    .fourthp {
      // display: inline-block;
      // margin-top: 30px;
      margin: 40px 0 20px 10px;
      // margin-bottom: 10px;
      .pdjszl {
        width: 104px;
        height: 17px;
        font-size: 18px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #272727;
      }
      .yzyb {
        width: 110px;
        height: 12px;
        font-size: 12px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #747474;
      }
      .morespan {
        width: 43px;
        height: 12px;
        font-size: 12px;
        font-family: PingFangSC;
        font-weight: 600;
        color: #747474;
        float: right;
        img {
          display: inline-block;
          width: 7px;
          height: 10px;
          margin-top: 10px;
        }
      }
    }
    .xrdiv {
      width: 100%;
      overflow: hidden;
      .yxtsli {
        width: 180px;
        height: 260px;
        background: #fefefe;
        border-radius: 5px;
        float: left;
        margin: 0 0 5px 5px;
        // padding-left: 10px;
        img {
          width: 150px;
          height: 150px;
          margin: 10px 15px;
        }
        .title {
          width: 150px;
          font-size: 12px;
          font-family: PingFangSC;
          font-weight: 400;
          color: #2f2f2f;
          margin-left: 10px;
        }
        .text {
          width: 150px;
          margin: 0 10px;
          line-height: 16px;
          font-size: 12px;
          font-family: PingFangSC;
          font-weight: 400;
          color: #a0a0a0;
        }
        .money {
          margin: 0 10px;
          width: 64px;
          height: 16px;
          font-size: 16px;
          font-family: PingFangSC;
          font-weight: 400;
          color: #ec6d2a;
          float: left;
        }
        .cart {
          float: right;
          width: 17px;
          height: 17px;
          border-radius: 50%;
          margin: 0 10px 10px 0;
        }
      }
    }
  }
}
</style>
